import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Input, Select, Spin } from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;
const { Option } = Select;

@connect(({ loading }) => ({
  loading: loading.models.suppliermaintenance,
}))
class BasicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      areaList: [],
      fetching: false,
    };
  }

  // 获取地区选项
  searchArea = value => {
    const { dispatch } = this.props;
    if (value) {
      this.setState({ areaList: [], fetching: true });
      dispatch({
        type: 'suppliermaintenance/queryNmArea',
        payload: { areaName: value },
        callback: res => {
          // console.log('后台返回数据', res)
          if (res.success && res.data.length) {
            this.setState({ areaList: res.data, fetching: false });
          }
        },
      });
    } else {
      this.setState({ areaList: [], fetching: false });
    }
  };

  render() {
    const { areaList, fetching } = this.state;
    const {
      form: { getFieldDecorator },
      bankList,
    } = this.props;
    // 表单布局
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    // 下拉选项
    // 银行
    const bankOL = bankList.map(options => (
      <Option key={options.itemCode}>{options.itemName}</Option>
    ));
    // 地区
    const areaOL = areaList.map(options => (
      <Option key={options.areaId}>{options.areaName}</Option>
    ));
    return (
      <Form layout="vertical">
        <Row gutter={64}>
          <Col {...colProps}>
            <FormItem label="城市">
              {getFieldDecorator('areaId', {
                rules: [{ required: true, message: '请选择' }],
              })(
                <Select
                  placeholder="请输入地区关键字检索"
                  showSearch
                  showArrow={false}
                  filterOption={false}
                  onSearch={this.searchArea}
                  notFoundContent={fetching ? <Spin size="small" /> : null}
                >
                  {areaOL}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="银行">
              {getFieldDecorator('bankId', {
                rules: [{ required: true, message: '请选择' }],
              })(
                <Select
                  placeholder="请输入关键字检索"
                  style={{ width: '100%' }}
                  labelInValue
                  showSearch
                  optionFilterProp="children"
                >
                  {bankOL}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="开户行">
              {getFieldDecorator('openBank', {
                rules: [{ required: true, message: '请输入' }],
              })(<Input placeholder="请输入" maxLength="100" />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={64}>
          <Col {...colProps}>
            <FormItem label="银行账号">
              {getFieldDecorator('bankAcco', {
                rules: [
                  { required: true, message: '最大长度不超过25位数字', pattern: /^\d{1,25}$/ },
                ],
              })(<Input placeholder="请输入" maxLength="25" />)}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="开户单位名称">
              {getFieldDecorator('accoHolderName', {
                rules: [{ required: true, message: '请输入' }],
              })(<Input placeholder="请输入" maxLength="100" />)}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="备注">
              {getFieldDecorator('remark', {
                rules: [{ required: false, message: '请输入' }],
              })(<Input placeholder="请输入" maxLength="200" />)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}
const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
